<template>
  <div class="single-stat-container">
    <div class="stat-row"><data-list :ticket-id="ticketId" :coupon-ids="couponIds" /></div>
    <div class="stat-row">
      <!--趋势图 start-->
      <trend :ticket-id="ticketId" :coupon-ids="couponIds" />
      <!--趋势图 end-->
    </div>
  </div>
</template>

<script>
import Trend from './charts/Trend';
import DataList from './table';

export default {
  name: 'Single',
  components: {
    Trend,
    DataList
  },
  props: {
    ticketId: {
      type: [String, Number],
      require: true,
      default: 0
    },
    couponIds: {
      type: Array,
      default: _ => []
    }
  }
};
</script>

<style scoped lang="scss">
.single-stat-container {
  .stat-row {
    margin-top: 20px;
    &:first-child {
      margin-top: 0;
    }
  }
  .overview {
    height: 150px;
    border-radius: 10px;
    border: 1px solid #d8dce6;
    .item {
      height: 70px;
      width: 20%;
      padding-left: 100px;
      border-right: 1px solid #d8dce6;
      &:first-child {
        padding-left: 80px;
      }
      .title {
        margin-top: 6px;
        font-size: 14px;
        color: #333333;
        font-weight: 400;
      }
      .number {
        margin-top: 14px;
        font-size: 30px;
        font-weight: bold;
        color: #333333;
      }
    }
  }
}
</style>
